<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            姓名：<input type="text" name="empNm"/>
                        </li>
                        <li>
                            证件号码：<input type="text" name="empId"/>
                        </li>
                        <li>
                            公司名称：<input type="text" name="empComp"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm hidden-xs" id="toolbar" role="group">
            <a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="pm:impSignInfo:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-success" onclick="batchImport()" >
                <i class="fa fa-cloud-upload"></i> 导入考勤
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    批量导入
                </h4>
            </div>
            <div class="modal-body">
                <input id="signFileUpload" name="signFileUpload" type="file" class="file" data-show-preview="false">
                <div class="text-center">
                    <button type="button" id="batchSubmit" class="btn btn-primary">批量导入</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>

            </div>

        </div>
    </div>
</div>

<script th:inline="javascript">
    var prefix = ctx + "pm/attendance";

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            modalName: "考勤导入",
            search:false,
            showSearch:false,
            showColumns:false,
            showToggle:false,
            showExport:false,
            showRefresh:false,
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '序号主键',
					visible: false
                },
                {
                    field: 'proDept',
                    title: '项目所属机构',
                    visible: false
                },
                {
                    field: 'proSn',
                    title: '项目编号'
                },
                {
                    field: 'proName',
                    title: '项目组'
                },
                {
                    field: 'empNm',
                    title: '姓名'
                },
                {
                    field: 'empId',
                    title: '身份证号'
                },
                {
                    field: 'empComp',
                    title: '人员所属机构/公司',
                },
                {
                    field: 'signDt',
                    title: '考勤日期',
		            formatter: function(value, row, index) {
		            	var rowStr = "";
		            	if(!!row.signDt)
		            		rowStr = '<span>'+row.signDt.substr(0,10)+'</span>';
		            	return rowStr;
		            },
                    visible: false
                },
                {
                    field: 'signStti',
                    title: '签到时间',
		            formatter: function(value, row, index) {
		            	var rowStr = "";
		            	if(!!row.signStti)
		            		rowStr = '<span>'+row.signStti.substr(11,8)+'</span>';
		            	return rowStr;
		            },
                    visible: false
                },
                {
                    field: 'signEdti',
                    title: '签退时间',
		            formatter: function(value, row, index) {
		            	var rowStr = "";
		            	if(!!row.signEdti)
		            		rowStr = '<span>'+row.signEdti.substr(11,8)+'</span>';
		            	return rowStr;
		            },
                    visible: false
                },
                {
                    field: 'signPd',
                    title: '人天数'
                },
                {
                    field: 'signHours',
                    title: '小时数',
                    visible: false
                },
                {
                    field: 'signMins',
                    title: '分钟数',
					visible: false
                },
                {
                    field: 'impTime',
                    title: '导入时间',
                    visible: false
                }]
        };
        $.table.init(options);
    });

    function batchImport(){
        $('#signFileUpload').fileinput('clear');
        $('#myModal').modal('show');
    }

    //初始化fileinput控件（第一次初始化）
    function initFileInput(ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh',
            uploadUrl: uploadUrl, //上传的地址
            showPreview: false,
            allowedFileExtensions : ['xlsx', 'xls'],//接收的文件后缀
            minFileCount: 1,                                        // 最小上传数量
            maxFileCount: 1,                                        // 最大上传数量
            showUpload: false, //是否显示上传按钮
            showCaption: true,//是否显示标题
            showRemove:false,                                       // 显示移除按钮
            uploadClass:"btn btn-success",                        // 上传按钮样式
            browseClass: "btn btn-primary", //按钮样式
            autoReplace:true,
            //enctype: 'multipart/form-data',
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"

        })
    }
    initFileInput("signFileUpload", ctx + "pm/attendance/upload");

    $('#batchSubmit').on('click',function(){
        $.modal.confirm("你确定要上传 ?", function() {
            $('#signFileUpload').fileinput('upload');
        });

    })

    //  uploadAsync设置为true并且已触发批量上传时被触发
    $("#signFileUpload").on("fileuploaded", function(event,data,previewid,index) {
        var result = data.response;
        if (result.code == '0') {
            $.modal.msgSuccess("批量导入成功");
            $.table.refresh();
            $('#myModal').modal('hide');
        } else {
            layer.alert(result.msg, {
                icon: 0,
                area:['60%','90%'],
                title: "系统提示",
            }, function (index) {
                layer.close(index);
                $('#myModal').modal('hide');
            });
        }
        $.modal.closeLoading();
    });

    $("#signFileUpload").on('fileerror', function(event, data, msg) {
        $.modal.alertError("批量导入成功失败"+msg);
    });

</script>
</body>
</html>